<template>
  <view :data-theme="theme">
    <view class="navbar acea-row row-around">
      <view class="item acea-row row-center-wrapper" :class="{ on: navOn === 'usable' }" @click="onNav('usable')">
        未使用
      </view>
      <view class="item acea-row row-center-wrapper" :class="{ on: navOn === 'unusable' }"
            @click="onNav('unusable')">已使用/失效
      </view>
    </view>
    <view class="coupon-box">
      <view class='coupon-list' v-if="couponsList.length">
<!--        <navigator url="/pages/activity/couponList/index" class="more-btn" hover-class="none">-->
<!--          <view class="pic_box">-->
<!--            <image :src="urlDomain + 'crmebimage/presets/my_coupon.png'" mode=""></image>-->
<!--          </view>-->
<!--        </navigator>-->

        <view class='item acea-row row-center-wrapper' v-for='(item,index) in couponsList' :key="index"
              @click="goCouponsProList(item)">
          <view class='money'
                :class="item.validStr==='unusable'||item.validStr==='overdue' ? 'moneyGray' : 'main_bg2'">
            <view class="logo">￥
              <text class='num'>{{ item.money ? Number(item.money) : '' }}</text>
            </view>
            <view class="pic-num">满{{ Number(item.minPrice) }}元可用</view>
          </view>
          <view class='text'>
            <view class='condition acea-row'>
              <view class="line-title"
                    :class="item.validStr==='unusable'||item.validStr==='overdue' ? 'bg-color-huic' : 'bg-color-check'">
                {{ item.category | couponTypeFilter }}
              </view>

              <view class="line2">{{ item.name }}</view>
            </view>
            <view class='data acea-row row-between-wrapper'>
              <view v-if="item.startTime && item.endTime && navOn === 'usable'">
                {{ $util.getCouponTime(item.startTime, item.endTime) }}
              </view>
              <view v-if="navOn === 'unusable'">
                <span v-show="item.validStr==='overdue'">该优惠券已失效无法使用</span>
                <span v-show="item.validStr==='unusable'">该优惠券已使用</span>
              </view>
              <span class="iconfont"
                    :class="{'icon-yilingqu1':item.validStr==='usable'||item.validStr==='notStart',
								'icon-yishiyong':item.validStr==='unusable',
								'icon-yishixiao':item.validStr==='overdue',
								'font-color2':item.validStr==='usable'||item.validStr==='notStart'
								}
								"></span>
            </view>
          </view>
        </view>
      </view>
      <view v-if="couponsList.length" class='loadingicon acea-row row-center-wrapper'>
        <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
        {{ loadTitle }}
      </view>
    </view>
    <view class='noCommodity' v-if="!couponsList.length && !loading">
      <view class='pictrue'>
        <image :src="urlDomain + 'crmebimage/presets/noCoupon.png'"></image>
        <span class="coupon">暂无优惠券可使用哦~</span>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getUserCoupons
} from '@/api/api.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";

let app = getApp();
export default {
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      couponsList: [],
      loading: false,
      loadend: false,
      loadTitle: '加载更多', //提示语
      page: 1,
      limit: 20,
      navOn: 'usable',
      theme: app.globalData.theme,
    };
  },
  computed: mapGetters(['isLogin']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.getUseCoupons();
        }
      },
      deep: true
    }
  },
  onLoad() {
    if (this.isLogin) {
      this.getUseCoupons();
    } else {
      toLogin();
    }
  },
  methods: {
    goCouponsProList(item) {
      if (this.navOn === 'usable') {
        uni.navigateTo({
          url: `/pages/goods/coupon_goods_list/index?type=2&userCouponId=${item.id}&money=${item.money}&minPrice=${item.minPrice}&isUserReceive=true`
        })
      }
    },
    onNav: function (type) {
      this.navOn = type;
      this.couponsList = [];
      this.page = 1;
      this.loadend = false;
      this.getUseCoupons();
    },
    /**
     * 获取领取优惠券列表
     */
    getUseCoupons: function () {
      let that = this;
      if (this.loadend) return false;
      if (this.loading) return false;
      this.loading = true;
      getUserCoupons({
        page: that.page,
        limit: that.limit,
        type: that.navOn
      }).then(res => {
        let list = res.data ? res.data.list : [],
            loadend = list.length < that.limit;
        let couponsList = that.$util.SplitArray(list, that.couponsList);
        that.$set(that, 'couponsList', couponsList);
        that.loadend = loadend;
        that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
        that.page = that.page + 1;
        that.loading = false;
      }).catch(err => {
        that.loading = false;
        that.loadTitle = '加载更多';
      });
    }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getUseCoupons();
  }
}
</script>

<style lang="scss" scoped>
.coupon-box {
  position: absolute;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 106rpx;
  background-color: #FCFAF6;
  z-index: 9;

  .item {
    border-top: 5rpx solid transparent;
    border-bottom: 5rpx solid transparent;
    font-size: 30rpx;
    color: #999999;

    &.on {
      //@include tab_border_bottom(theme);
      //@include main_color(theme);
      border-bottom: 3px solid #8F4C38;
      color: #8F4C38;
    }
  }
}

.main_bg2{
  background-color: #8F4C38;
}
.font-color2{
  color: #8F4C38;
}

.money {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 20rpx !important;

  .logo {
    font-size: 39rpx;
  }
}

.bg_color {
  @include main_bg_color(theme);
}

.pic-num {
  color: #ffffff;
  font-size: 24rpx;
}

.pic_box {
  width: 690rpx;
  height: 160rpx;
  margin: 30rpx auto;

  image {
    width: 100%;
    height: 100%;
  }
}

.coupon-list {
  margin-top: 122rpx;
}

.coupon-list .item {
  overflow: hidden;
}

.coupon-list .item .text {
  height: 100%;
  position: relative;

  .iconfont {
    right: -16rpx;
    position: absolute;
    font-size: 140rpx;
    bottom: -20rpx;
    z-index: 1;
    opacity: 0.15;
  }
}

.coupon-list .item .text .data {
  border-top: 1px solid #f0f0f0;
}

.bg-color-check {
  //@include main_color(theme);
  //@include coupons_border_color(theme);
  color: #8F4C38;
  border: 1px solid #8f4c38;
  font-size: 20rpx !important;
}

.noCommodity {
  margin-top: 64%;
}


.pictrue {
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 414rpx;
    height: 305rpx;
  }

  .coupon {
    font-size: 26rpx;
    color: #999999;
  }
}
</style>